<template>
  <div class="userList">
    <el-card class="formTable">
      <div class="addBtn">注册用户列表</div>
      <el-table :data="tableData" style="width: 100%" border size="medium">
        <el-card>
          <el-card class="main-header" shadow="never" />
          <el-table-column label="序号" fixed type="index" align="center" />
          <el-table-column
            label="用户名"
            prop="username"
            align="center"
            width="200px"
          />
          <el-table-column label="头像" width="200px" align="center">
            <template slot-scope="scope">
              <el-image
                style="width: 80px; height: 80px; border-radius: 50%"
                :src="scope.row.icon"
              />
            </template>
          </el-table-column>
          <el-table-column
            label="昵称"
            prop="nickname"
            align="center"
            width="200px"
          />
          <el-table-column
            label="真实姓名"
            prop="realname"
            align="center"
            width="200px"
          />
          <el-table-column label="性别" align="center" prop="sex" width="120px">
            <template slot-scope="scope">
              <div>
                {{ scope.row.sex == 0 ? '男' : '女' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="电话"
            prop="phone"
            align="center"
            width="200px"
          />
          <el-table-column
            label="邮箱"
            prop="email"
            align="center"
            width="200px"
          />
          <el-table-column
            label="生日"
            prop="birthday"
            align="center"
            width="200px"
          />
          <el-table-column
            label="注册时间"
            prop="createTime"
            align="center"
            width="240px"
          />
        </el-card>
      </el-table>
      <!-- 分页 -->
      <div class="main-footer">
        <el-pagination
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { findMembersByPage } from '@/api/users/index'
import mixins from '@/mixins/index'
export default {
  mixins: [mixins],
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      findMembersByPage(this.page.currentPage, this.page.pageSize).then(
        (res) => {
          this.tableData = res.data.rows
          this.page.total = res.data.total
        }
      )
    }
  }
}
</script>

<style>
</style>
